<template>
  <h2>当前求和：{{ sum }}</h2>
  <button @click="sum++">点击+1</button>
</template>

<script>
// 体现出了组合式API的使用
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";
export default {
  name: "myDemo",
  setup() {
    // (1)setup相当于beforeCreated、created
    console.log('---setup---');

    let sum = ref(0);

    // (2)在组合式API中得生命周期函数都加了 On
    onBeforeMount(() => { console.log('---onBeforeMount---');});

    onMounted(() => { console.log('---onMounted---');});

    onBeforeUpdate(() => { console.log('---onBeforeUpdate---');});

    onUpdated(() => { console.log('---onUpdated---');});
    
    // (3)destoryed改为了 unmount，有种对应的感觉
    onBeforeUnmount(() => { console.log('---onBeforeUnmount---');});

    onUnmounted(() => { console.log('---onUnmounted---');});

    return {
      sum,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
